<template>
  <div class="box">
      <div class="spec">
          <div class="gird_c1">
              <div class="special_sale">
                  <div class="header">
                      <a href="#">
                          <h2>每日特价</h2>
                          <i>></i>
                      </a>
                  </div>
                  <div class="body">
                      <div class="tab_list">
                        <div class="tab_item" @mousemove="show('1')"><a href="#">精选</a></div>
                        <div class="tab_item" @mousemove="show('2')"><a href="#">水果</a></div>
                        <div class="tab_item" @mousemove="show('3')"><a href="#">百货</a></div>
                        <div class="tab_item" @mousemove="show('4')"><a href="#">个护</a></div>
                        <div class="tab_item" @mousemove="show('5')"><a href="#">预告</a></div>
                      </div>
                      <div class="speciallist">
                          <div class="list1" v-for="list of saleList" :key="list.id" v-show="page===list.id">
                              <div class="item1">
                                <a class="special_item_lk" href="#">
                                  <h2>一年最低价</h2>
                                  <div class="imgbox">
                                    <img :src="list.bigImg" alt="">
                                  </div>
                                  <span href="#">【品牌特卖】短袖速干T恤 特价9.9 原价33</span>
                                  <span class="price">￥9.9</span>
                                </a>
                              </div>
                              <div class="item special1" v-for="smallBox of list.smallBoxs" :key="smallBox.id">
                                <div class="imgbox">
                                  <img :src="smallBox.samllImg" alt="dsad">
                                </div>
                                <div class="content">
                                  <span>{{smallBox.content}}</span>
                                </div>
                                <div class="price">
                                  <span class="price">{{smallBox.price}}</span>
                                </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="lighting_buy">
                <div class="header">
                    <a href="#">
                        <h2>品牌闪购</h2>
                        <i>></i>
                    </a>
                </div>
                <div class="body">
                  <a href="">
                    <div class="contentbox">
                      <div class="content">
                        <h2>ZTX中兴</h2>
                        <span>中兴手机闪购专场</span>
                        <div class="lastday">
                          <span>卷后最高优惠700元 | 仅剩</span>
                          <strong>2</strong>天
                        </div>
                      </div>
                      <div class="imgBox">
                        <img src="../../../assets/images/zxsj.jpg" alt="">
                      </div>
                  </div>
                  </a>
                  <div class="good_others">
                    <a href="" v-for="good in goods" :key="good.id">
                      <div class="good">
                        <div class="imgBox">
                          <img :src="good.img" alt="">
                        </div>
                        <span>
                          {{good.content}}
                        </span>
                      </div></a>
                  </div>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSpec',
  data: function () {
    return {
      page: '1',
      saleList: [
        {
          id: '1',
          bigImg: require('../../../assets/images/yf.jpg'),
          smallBoxs:
            [
              {id: 1, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 2, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 3, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 4, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'}
            ]
        },
        {
          id: '2',
          bigImg: require('../../../assets/images/tsxlg.jpg'),
          smallBoxs:
            [
              {id: 1, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 2, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 3, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 4, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'}
            ]
        },
        {
          id: '3',
          bigImg: require('../../../assets/images/fh.jpg'),
          smallBoxs:
            [
              {id: 1, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 2, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 3, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 4, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'}
            ]
        },
        {
          id: '4',
          bigImg: require('../../../assets/images/xfs.jpg'),
          smallBoxs:
            [
              {id: 1, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 2, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 3, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'},
              {id: 4, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'}
            ]
        },
        {
          id: '5',
          bigImg: require('../../../assets/images/tk.jpg'),
          smallBoxs:
            [
              {id: 1, samllImg: require('../../../assets/images/zd.jpg'), content: '舒服的坐垫，软软的很贴心', price: '￥212'},
              {id: 2, samllImg: require('../../../assets/images/sjk.jpg'), content: '人类高质量手机壳，美少女都喜欢', price: '￥212'},
              {id: 3, samllImg: require('../../../assets/images/lx.jpg'), content: '好吃的龙虾，走过路过不要错过', price: '￥212'},
              {id: 4, samllImg: require('../../../assets/images/jiazi.jpg'), content: '人类高质量架子喜欢就赶紧买吧', price: '￥212'}
            ]
        }
      ],
      goods: [
        {id: 1, img: require('../../../assets/images/dkn.png'), content: '迪卡侬冬季换新'},
        {id: 2, img: require('../../../assets/images/dkn.png'), content: '迪卡侬冬季换新'},
        {id: 3, img: require('../../../assets/images/dkn.png'), content: '迪卡侬冬季换新'},
        {id: 4, img: require('../../../assets/images/dkn.png'), content: '迪卡侬冬季换新'},
        {id: 5, img: require('../../../assets/images/dkn.png'), content: '迪卡侬冬季换新'},
        {id: 6, img: require('../../../assets/images/dkn.png'), content: '迪卡侬冬季换新'}
      ]
    }
  },
  methods: {
    show (e) {
      this.page = e
      console.log(this.page)
    }
  }
}
</script>

<style lang='stylus' scoped>
.box
  background #f4f4f4
  height 400px
  .spec
    position relative
    left -20px
    width 1180px
    margin-left auto
    margin-right auto
    margin-bottom 20px
    .gird_c1
      display grid
      width 100%
      height 300px
      grid-template-columns: 1fr 1fr
      grid-column-gap 20px
      .special_sale
        position relative
        background-color #fff
        .header
          padding 0 10px
          position relative
          display flex
          align-items center
          top 0
          left 0
          height 50px
          line-height 50px
          width 100%
          a
            color #000
            i
              display inline-block
              margin-left 8px
              margin-bottom 6px
              width 14px
              height 14px
              line-height 18px
              border 1px solid #e1251b
              border-radius 7px
              text-align center
              color #e1251b
            i:hover
              color #fff
              background #DC1623
            h2
              display inline-block
              font-weight 700
              font-size 24px
        .body
          position relative
          .tab_list
            position absolute
            bottom 108%
            right 0
            .tab_item
              position relative
              display inline-block
              margin 0 13.5px
              a
                display inline-block
                cursor pointer
                font-size 16px
                font-family Microsoft Yahei,PingFangSC-Medium,sans-serif,serif
                color #999
                line-height 19px
                padding-bottom 2
            .tab_item:hover:after
              content ""
              position absolute
              bottom -3px
              left 0
              width 100%
              height 2px
              background-color: #e1251b
            .tab_item:hover a
              color #e1251b
          .speciallist
            margin 0
            .list1
              width 560px
              height 270px
              margin-left 6px
              .item1
                display inline-block
                width 170px
                height 260px
                float left
                background #f4f4f4
                .special_item_lk
                  position relative
                  display inline-block
                  width 170px
                  h2
                    position absolute
                    display inline-block
                    top 0
                    left 0
                    width 90px
                    height 20px
                    line-height 20px
                    color #fff
                    font-size 12px
                    font-weight 700
                    background-image url(../../../assets/images/zdj.png)
                    text-align center
                  .imgbox
                    position relative
                    margin-top 46px
                    width 120px
                    display inline-block
                    left 50%
                    margin-left -60px
                    height 120px
                    text-align center
                    margin-bottom 10px
                    img
                      width 100%
                  span
                    display block
                    padding-top 10px
                    width 120px
                    height 16px
                    line-height 16px
                    margin 0 auto
                    font-size 14px
                    text-align center
                    overflow hidden
                    white-space nowrap
                    color #000
                  .price
                    width 120px
                    color #e1251b
                    font-size 20px
                    text-align center
            .item
              float left
              width 170px
              height 84px
              margin-top 18px
              margin-left 18px
              margin-bottom 48px
              .imgbox
                float left
                width 84px
                height 84px
                margin-right 4px
                img
                  width 100%
              .content
                float left
                display inline-block
                width 72px
                height 32px
                letter-spacing 1px
                line-height 16px
                overflow hidden
                text-overflow ellipsis
                span
                  font-size 12px
              .price
                float left
                margin-top 4px
                color red
      .lighting_buy
        position relative
        background-color #fff
        .header
          padding 0 10px
          position relative
          display flex
          align-items center
          top 0
          left 0
          height 50px
          line-height 50px
          width 100%
          a
            color #000
            i
              display inline-block
              margin-left 8px
              margin-bottom 6px
              width 14px
              height 14px
              line-height 18px
              border 1px solid #e1251b
              border-radius 7px
              text-align center
              color #e1251b
            i:hover
              color #fff
              background #DC1623
            h2
              display inline-block
              font-weight 700
              font-size 24px
        .body
          position relative
          width 560px
          height 270px
          margin-left 6px
          .contentbox
            float left
            top 0
            left 0
            width 270px
            height 265px
            display flex
            flex-direction column
            justify-content center
            align-items center
            background #f4f4f4
            text-align center
            .content
              width 270px
              height 130px
              h2
                display block
                margin 20px 0
                font-weight 700
                color #118ACF
                font-size 16px
              span
                color #000
                font-size 16px
                font-weight 700
              .lastday
                margin-top 6px
                color #000
                span
                  font-weight 400
                  font-size 12px
                strong
                  font-weight 700
            .imgBox
              position relative
              top -20px
              width 130px
              height 130px
              img
                width 100%
          .good_others
            position absolute
            right 10px
            margin-top -20px
            margin-left 6px
            display grid
            width 270px
            height 312px
            grid-template-columns 1fr 1fr
            gap 10px 10px
            .good
              display flex
              flex-direction column
              align-items center
              position relative
              justify-content center
              .imgBox
                width 100px
                height 50px
                margin-bottom 10px
                img
                  width 100%
              span
                color #333
                font-size 12px
</style>
